<template>
	<view>
		<view class="detail" v-for="(item,index) in details.list">
			<!-- 背景图 -->
			<view class="background">
				<image :src="imgURL+ details.indexImg" mode="aspectFill" style="width:100%;"></image>
			</view>

			<view class="" style="background-color: #fff;margin-bottom: 60rpx;">
				<!-- 积分，库存 -->
				<view class="margin-com flex-row">
					<text class="theme-color">{{item.intergl}}积分</text>
					<text style="margin-left: auto;font-size: 20rpx;">库存剩余:{{item.surplus_num}}</text>
				</view>
				<!-- 名称，兑换时间，兑换地点，捐赠人 -->
				<view class="title margin-com">{{item.title}}</view>

				<view class="margin-com flex-row" style="font-size: 25rpx;">
					<text>兑换时间：{{item.time}}</text>
				</view>

				<view class="margin-com flex-row" style="font-size: 25rpx;">
					<text>兑换地点：{{item.address}}</text>
					<image src="https://api.anred.qrsk.net/applet/profile/image/position.png" mode="aspectFill"
						style="width:40rpx;height:40rpx;margin-left: auto;"></image>
				</view>

				<view class="margin-com flex-row" style="font-size: 25rpx;">
					<text>捐赠来源（个人）：{{item.source}}</text>
				</view>
			</view>

			<!-- 产品介绍 -->
			<view class="introduce margin-tb-com" style="background-color: #fff;width: 100%;height:500rpx"
				v-for="(itema,indexa) in productIntroduction.list">
				<view class="title margin-com" style="font-weight: bolder;">产品介绍</view>
				<view class="expound margin-com border-radius-shadow"
					style="background-color: #fff;width: 92%;height:400rpx">
					<view class="box box-f flex-row-st">
						<view class="box-left text-mid padding-left-com flex-row-st text-bg">品牌</view>
						<view class="box-right padding-left-com flex-row-st">{{itema.brand}}</view>
					</view>
					<view class="box box-f flex-row-st">
						<view class="box-left text-mid padding-left-com flex-row-st text-bg">功能性</view>
						<view class="box-right padding-left-com flex-row-st">{{itema.functionality}}</view>
					</view>
					<view class="box box-f flex-row-st">
						<view class="box-left text-mid padding-left-com flex-row-st text-bg">尺码</view>
						<view class="box-right padding-left-com flex-row-st">{{itema.size}}</view>
					</view>
					<view class="box box-f flex-row-st">
						<view class="box-left text-mid padding-left-com flex-row-st text-bg">风格</view>
						<view class="box-right padding-left-com flex-row-st">{{itema.style}}</view>
					</view>
					<view class="box flex-row-st" style="width:100%;height:20%;">
						<view class="box-left text-mid padding-left-com flex-row-st text-bg">颜色分类</view>
						<view class="box-right padding-left-com flex-row-st">{{itema.color}}</view>
					</view>
				</view>
			</view>

			<!-- 详情图片 -->
			<view class="detail margin-tb-com" style="">
				<view class="title margin-com" style="font-weight: bolder;">商品详情</view>
				<image :src="item.image" mode="aspectFill" style="width:100%;height:700px"></image>
			</view>
			<!-- 底部导航栏 -->
			<view class="" style="width:100%;height:80px;"></view>

			<view class="tabbar flex-row-st " style="position: fixed; bottom: 0; left: 0; right: 0;
			width:100%;height:60px;background-color: #fff;">
				<!-- 立即兑换 -->
				<view>
					<button class="theme-bg-color margin-left-com" type="warn" size="mini"
						style="color:#fff;width:500rpx;height:70rpx;align-items: center;" @click="openPop">立即兑换</button>
				</view>

				<!-- 分享 -->
				<view class="margin-right-com iconfont icon-fenxiang theme-color"
					style="margin-left: auto;font-size: 30px;"></view>

			</view>
		</view>
		<!-- 弹窗 -->
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="" style="background-color: #fff;width:100%;height:400px;border-radius: 30rpx 30rpx 0 0;">
				<!-- 图片,积分 -->
				<view class="flex-row-st" style="">
					<image class="margin-com " src="https://api.anred.qrsk.net/applet/profile/image/little.png" mode="aspectFill"
						style="width:50px;height:50px"></image>
					<text class="theme-color">{{}}积分</text>
				</view>
				<!-- 颜色 -->
				<view style="">
					<view class="margin-left-com flex-row-st">颜色</view>
					<view class="flex-row-st" style="font-size: 15rpx;width:100%;height:100rpx;
					">
						<view class="bg-color border-radius-shadow flex-row-ct margin-left-com"
							style="width:45%;height:70rpx">黄白色笑脸【长袖+长裤】</view>
						<view class="bg-color border-radius-shadow flex-row-ct margin-right-com"
							style="width:45%;height:70rpx;margin-left: auto;">黄黑色笑脸【长袖+长裤】</view>
					</view>
				</view>
				<!-- 尺码 -->
				<view style="width:100%;height:400rpx">
					<view class="margin-left-com flex-row-st">尺码</view>
					<view class=" margin-tb-com" style="font-size: 15rpx;width:100%;height:700rpx;">
						<view class="flex-row-st" style="height:100rpx">
							<view class="bg-color border-radius-shadow flex-row-ct
							margin-left-com" style="width:35%;height:70rpx">女生M码【全棉】</view>
							<view class="bg-color border-radius-shadow flex-row-ct
							margin-left-com" style="width:35%;height:70rpx;">
								女生L码【全棉】</view>
						</view>
						<view class="flex-row-st" style="height:100rpx">
							<view class="bg-color border-radius-shadow flex-row-ct
							margin-left-com" style="width:35%;height:70rpx">女生XL码【全棉】</view>
							<view class="bg-color border-radius-shadow flex-row-ct
							margin-left-com" style="width:35%;height:70rpx;">
								男生L码【全棉】</view>
						</view>
						<view class="flex-row-st" style="height:100rpx">
							<view class="bg-color border-radius-shadow flex-row-ct
							margin-left-com" style="width:35%;height:70rpx">男生XL码【全棉】</view>
							<view class="bg-color border-radius-shadow flex-row-ct
							margin-left-com" style="width:35%;height:70rpx;">
								男生XXL码【全棉】</view>
						</view>
					</view>
				</view>
				<!-- 立即兑换 -->
				<view>
					<navigator url="">
						<button class="theme-bg-color margin-left-com" type="warn" size="mini"
							style="color:#fff;width:90%;height:70rpx;align-items: center;">立即兑换</button>
					</navigator>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import { getProductInfo } from '../../api/exchange/exchange';
	import { onLoad } from "@dcloudio/uni-app"
	import { imgURL } from '../../api/request';
	// import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';


	//弹窗
	const popup = ref(null)
	// const popupType = ref('bottom')
	// const onsetTimeout = () => {
	// 	setTimeout(() => {
	// 		popup.value.close()
	// 	}, 2000)
	// }
	const openPop = () => {
		console.log('1')
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		popup.value.open()
		// uni.showToast({
		// 	title: '功能正在开发中...',
		// 	icon: 'none',
		// 	duration: 2000
		// });
	}

	//产品介绍
	const productIntroduction = reactive({
		list: [{
			brand: '其他',
			functionality: '睡衣',
			size: 'S M L XL',
			style: '卡通睡衣',
			color: '黄白色笑脸 黄黑色笑脸'
		}]
	})
	//
	const details = reactive({
		"id": "6",
		"indexImg": "/profile/product/2024/03/28/91dc7a52-8077-44e1-a46e-f33be984c762_20240328142343A002.jpg",
		"productName": "九阳豆浆机",
		"integratedWorth": "500",
		"productCategory": "0",
		"inventory": 115,
		"releaseTime": "2024-03-30 10:19:19",
		"detailsId": "6",
		"exchangeLocation": "萍乡市安源区萍安北大道安源镇敬老院",
		"donationSource": "何信峰",
		"sourceCategory": "1",
		"brand": "九阳", "style": "",
		"functionality": null,
		"serviceIntroduce": null,
		"imgUrl": [
			"/profile/product/2024/03/28/91dc7a52-8077-44e1-a46e-f33be984c762_20240328142343A002.jpg",
			"/profile/product/2024/03/28/6784240f-6bce-4cf9-871d-dbc866a747d3_20240328142741A003.png"
		],
		"colorList": ["白色", "棕色"],
		"sizeList": [],
		"specificationsList": [],
		"timeSlotList": null,
		"timeIntervalList": null,
		list: [{
			img: 'https://api.anred.qrsk.net/applet/profile/image/background.png',
			intergl: 69,
			surplus_num: 70,
			title: '笑脸家居套装',
			time: '1小时30分20秒后',
			address: '萍乡市安源区萍安北大道安源镇敬老院',
			source: '何信峰',
			image: 'https://api.anred.qrsk.net/applet/profile/image/detail.png'
		}],
	})

	onLoad((option) => {
		const id = option.id
		console.log('id========' + id)
		get_detail()
	})

	const get_detail = () => {
		getProductInfo({
			productId: 6
		}).then((res : any) => {
			console.log(JSON.stringify(res.data))
		})
	}
</script>

<style lang="scss" scoped>
	.detail {
		.introduce {
			.expound {
				.box {
					width: 100%;
					height: 20%;
					font-size: 30rpx;
					font-weight: bold;

					.box-left {
						width: 40%;
						height: 100%;
						border-right: 1px solid #D9D9D9;
					}

					.box-right {
						width: 60%;
						height: 100%;
					}
				}

				.box-f {
					border-bottom: 1px solid #D9D9D9;
				}
			}
		}
	}

	.tabbar {
		box-shadow: $uni-shadow-lg;
	}
</style>
